<script>
import { Popup, Toast } from 'vant';
import SignInCard from './SignInCard.vue';
import { api } from '@/api';
import { mapStores } from 'pinia'
import { useAppStore } from '@/stores/app';


export default {
  components: {
    Popup,
    SignInCard
},
  computed: {
    ...mapStores(useAppStore)
  },
  data() {
    return {
      success: false,
      show: false
    }
  },
  methods: {
    async open() {
      const loading = Toast.loading({ message: '正在签到...' })
      const { success } = await api.sign({ userName: this.appStore.accessToken })
      loading.clear()
      this.success = success
      this.show = true
    },
    async handleSign() {
      this.show = false
    }
  },
}
</script>

<template>
  <Popup v-model="show" position="center" style="background-color: transparent;">
    <div class="sign-in-container">
      <div class="sign-in-main">
        <img style="width: 100%; height: 100%;" src="../assets/images/sign-in-result.png" alt="">

        <div class="sign-in-button" @click="handleSign">
          <img style="width: 100%;"  src="../assets/images/button.png" alt="">
          <div class="sign-in-button-text flex-centered">
            确认
          </div>
        </div>

        <div class="sign-in-cards">
          <div v-if="success">恭喜您 签到成功</div>
          <div v-else>今日已签到</div>
        </div>
      </div>
    </div>
  </Popup>
</template>

<style lang="less" scoped>
.sign-in-container {
  width: 280px;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  

  .sign-in-main {
    width: 100%;
    position: relative;
  }

  .sign-in-button {
    position: absolute;
    width: 140px;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    &-text {
      position: absolute;
      left: 0;
      top: -2px;
      width: 100%;
      height: 100%;
      color: #be331e;
      font-weight: bold;
    }
  }

  .sign-in-cards {
    position: absolute;
    width: 190px;
    left: 50%;
    top: 135px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    text-align: center;
    font-size: 20px;

    &-title {
      width: 80%;
      margin: 0 auto;
      color: #be331e;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;

      &::before, &::after {
        content: '';
        display: block;
        flex: 1;
        height: 1px;
        background-color: #be331e;
      }
    }
  }

  .sign-in-close {
    width: 28px;
    height: 28px;
  }
}
</style>
